<template>
  <view class="container">
    <!-- 榜单标签栏 -->
    <view class="tab-bar">
      <view class="tab-item active">销量榜</view>
      <view class="tab-item">人气榜</view>
      <view class="tab-item">关注榜</view>
      <view class="tab-item">热搜榜</view>
      <view class="tab-item">优质楼盘</view>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-container">
      <view class="filter-row">
        <view
            class="filter-item"
            v-for="(filterItem, index) in filterList"
            :key="index"
            @click="toggleDropdown(index)"
        >
          <text>{{ filterItem.name }} ▼</text>
          <view v-if="filterItem.isOpen" class="dropdown-menu">
            <view
                class="dropdown-item"
                v-for="(option, optIndex) in filterItem.options"
                :key="optIndex"
                @click="selectOption(index, optIndex)"
            >
              {{ option }}
            </view>
          </view>
        </view>
      </view>
    </view>



    <!-- 榜单内容 -->
<!--    <view class="rank-list">-->
<!--      <view class="rank-item">-->
<!--        <view class="rank-tag">TOP1</view>-->
<!--        <view class="house-info">-->
<!--          <text>龙井湖院 8000/m</text>-->
<!--          <text>建筑面积 97-170m</text>-->
<!--          <button class="consult-btn">在线咨询</button>-->
<!--        </view>-->
<!--      </view>-->
<!--      <view class="rank-item">-->
<!--        <view class="rank-tag">TOP2</view>-->
<!--        <view class="house-info">-->
<!--          <text>龙井湖院 8000/m</text>-->
<!--          <text>建筑面积 97-170m</text>-->
<!--          <button class="consult-btn">在线咨询</button>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->

      <view
          class="rank-item"
          v-for="(item, index) in rankList"
          :key="index"
      >
        <view class="rank-tag">TOP{{ index + 1 }}</view>
        <view class="house-info">
          <text class="house-name">龙井湖院 8000/m</text>
          <text class="house-attr">建筑面积 97-170m</text>
          <button class="consult-btn">在线咨询</button>
        </view>
      </view>


  </view>
</template>

<script>
export default {
  data() {
    return {
      rankList: Array(2), // 生成两条数据
      filterList: [
        {
          name: '区域',
          isOpen: false,
          options: ['不限', '上高区', '中心区', '开发区']
        },
        {
          name: '均价',
          isOpen: false,
          options: ['不限', '6000元以下', '6000-7000元', '7000-8000元']
        },
        {
          name: '更多',
          isOpen: false,
          options: ['不限', '新房', '二手房', '商铺']
        },
        {
          name: '排序',
          isOpen: false,
          options: ['默认排序', '价格升序', '价格降序', '热度排序']
        }
      ]
    };
  },
  methods: {
    toggleDropdown(index) {
      // 切换当前下拉展开状态，关闭其他下拉
      this.filterList.forEach((item, i) => {
        if (i === index) {
          item.isOpen = !item.isOpen;
        } else {
          item.isOpen = false;
        }
      });
    },
    selectOption(filterIndex, optIndex) {
      const selectedOption = this.filterList[filterIndex].options[optIndex];
      this.filterList[filterIndex].name = selectedOption;
      this.filterList[filterIndex].isOpen = false;
      console.log(`选中筛选条件：${selectedOption}`);
    }

  }
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.tab-bar {
  display: flex;
  margin-bottom: 30rpx;
  border-bottom: 2rpx solid #333;
}

.tab-item {
  padding: 15rpx 25rpx;
  font-size: 28rpx;
  color: #666;
}

.tab-item.active {
  color: #333;
  border-bottom: 2rpx solid #333;
}



.filter-item {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 15rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin-right: 20rpx;
  position: relative;
}

.filter-item text {
  color: #666;
  font-size: 28rpx;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  padding: 10rpx;
  min-width: 100%;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
}



.rank-list {
  background-color: #fff;
  border-radius: 10rpx;
}

.rank-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
  position: relative;
}

.rank-tag {
  padding: 5rpx 15rpx;
  background-color: #f0f0f0;
  border-radius: 20rpx;
  color: #666;
  font-size: 28rpx;
  margin-bottom: 15rpx;
}

.house-info text {
  display: block;
  color: #333;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.consult-btn {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  padding: 10rpx 20rpx;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5rpx;
  font-size: 28rpx;
}


.filter-container {
  background: #ffffff;
  padding: 15rpx;
}

.filter-row {
  display: flex;
  gap: 20rpx;
}

.filter-item {
  position: relative;
  padding: 10rpx 15rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #ffffff;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  padding: 10rpx 0;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.dropdown-item {
  padding: 8rpx 15rpx;
  font-size: 26rpx;
  color: #666;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}


.rank-item {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  position: relative;
}

.rank-tag {
  padding: 8rpx 15rpx;
  background-color: #e0e0e0;
  border-radius: 20rpx;
  color: #666;
  font-size: 28rpx;
  margin-bottom: 15rpx;
  display: inline-block;
}

.house-info {
  position: relative;
}

.house-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.house-attr {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.consult-btn {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  padding: 10rpx 20rpx;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5rpx;
  font-size: 28rpx;
}

</style>